<template>
  <div>
    <Container padding-left="4.1667vw" padding-right="4.1667vw">
      <div class="content">
        <div class="slider-menu no-scrollbar scroll-x" v-if="ClassicList">
          <div
            class="slider-menu-item"
            @click="handleSelect(item, index)"
            v-for="(item, index) in ClassicList"
            :key="item.id"
            :class="item.id == selectedId ? 'active' : ''"
          >
            {{ item.title }}
          </div>
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <div class="slider-menu">
              <div class="slider-menu-item" v-for="i in 4" :key="i">
                <Skeleton block height="100%" radius="8px"></Skeleton>
              </div>
            </div>
          </div>
          <div class="mobile-skeleton">
            <div class="slider-menu">
              <div class="slider-menu-item" v-for="i in 4" :key="i">
                <Skeleton width="750px" height="200px" radius="31px"></Skeleton>
              </div>
            </div>
          </div>
        </template>
        <div class="menu-content">
          <div class="menu-title">{{ $t("content.download.title") }}</div>
          <div class="menu-list">
            <template v-if="fileList && fileList.length !== 0">
              <div class="menu-item" :key="item.id" v-for="item in fileList">
                <div class="file">
                  <!-- pdf -->
                  <svg
                    v-if="showIcon(item.down_url, 'pdf')"
                    class="icon pdf"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g id="File type icon">
                      <g id="Page">
                        <path
                          id="Page background"
                          d="M20.9992 23.55H6.59922C5.52226 23.55 4.64922 22.677 4.64922 21.6V2.4C4.64922 1.32304 5.52226 0.45 6.59922 0.45H16.1992C16.272 0.45 16.3417 0.478896 16.3932 0.53033L22.8689 7.00607C22.9203 7.0575 22.9492 7.12726 22.9492 7.2V21.6C22.9492 22.677 22.0762 23.55 20.9992 23.55Z"
                          fill="white"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                        <path
                          id="Earmark"
                          d="M16.1992 0.300049V4.80005C16.1992 6.12553 17.2737 7.20005 18.5992 7.20005H23.0992"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                      </g>
                      <g id="File type wrap">
                        <rect
                          x="0.599609"
                          y="10.8999"
                          width="15.6"
                          height="9.4"
                          rx="1.2"
                          fill="#D92D20"
                        />
                        <path
                          id="File type"
                          d="M2.89977 18.0999V13.7362H4.62136C4.95233 13.7362 5.23429 13.7994 5.46724 13.9258C5.7002 14.0508 5.87775 14.2249 5.99991 14.4479C6.12349 14.6695 6.18528 14.9251 6.18528 15.2149C6.18528 15.5047 6.12278 15.7604 5.99778 15.982C5.87278 16.2035 5.69167 16.3761 5.45446 16.4997C5.21866 16.6233 4.93315 16.6851 4.59792 16.6851H3.50062V15.9457H4.44877C4.62633 15.9457 4.77264 15.9152 4.8877 15.8541C5.00417 15.7916 5.09082 15.7057 5.14764 15.5963C5.20588 15.4855 5.235 15.3584 5.235 15.2149C5.235 15.07 5.20588 14.9436 5.14764 14.8356C5.09082 14.7263 5.00417 14.6418 4.8877 14.5821C4.77122 14.521 4.62349 14.4905 4.44451 14.4905H3.82235V18.0999H2.89977ZM8.33141 18.0999H6.78453V13.7362H8.34419C8.78311 13.7362 9.16096 13.8236 9.47772 13.9983C9.79448 14.1716 10.0381 14.4209 10.2085 14.7462C10.3804 15.0714 10.4664 15.4606 10.4664 15.9138C10.4664 16.3683 10.3804 16.7589 10.2085 17.0856C10.0381 17.4124 9.79306 17.6631 9.47346 17.8378C9.15527 18.0125 8.77459 18.0999 8.33141 18.0999ZM7.70712 17.3094H8.29306C8.56578 17.3094 8.79519 17.2611 8.98127 17.1645C9.16877 17.0665 9.30939 16.9152 9.40314 16.7106C9.49831 16.5047 9.5459 16.2391 9.5459 15.9138C9.5459 15.5913 9.49831 15.3278 9.40314 15.1233C9.30939 14.9187 9.16948 14.7682 8.9834 14.6716C8.79732 14.575 8.56792 14.5267 8.29519 14.5267H7.70712V17.3094ZM11.1498 18.0999V13.7362H14.039V14.4969H12.0724V15.5366H13.8472V16.2973H12.0724V18.0999H11.1498Z"
                          fill="white"
                        />
                      </g>
                    </g>
                  </svg>
                  <!-- doc -->
                  <svg
                    v-if="showIcon(item.down_url, 'doc')"
                    class="icon doc"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g id="File type icon">
                      <g id="Page">
                        <path
                          id="Page background"
                          d="M20.9992 23.55H6.59922C5.52226 23.55 4.64922 22.677 4.64922 21.6V2.4C4.64922 1.32304 5.52226 0.45 6.59922 0.45H16.1992C16.272 0.45 16.3417 0.478896 16.3932 0.53033L22.8689 7.00607C22.9203 7.0575 22.9492 7.12726 22.9492 7.2V21.6C22.9492 22.677 22.0762 23.55 20.9992 23.55Z"
                          fill="white"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                        <path
                          id="Earmark"
                          d="M16.1992 0.300049V4.80005C16.1992 6.12553 17.2737 7.20005 18.5992 7.20005H23.0992"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                      </g>
                      <g id="File type wrap">
                        <rect
                          x="0.5"
                          y="10.8999"
                          width="17.6"
                          height="9.4"
                          rx="1.2"
                          fill="#155EEF"
                        />
                        <path
                          id="File type"
                          d="M4.44176 18.0999H2.89489V13.7362H4.45455C4.89347 13.7362 5.27131 13.8236 5.58807 13.9983C5.90483 14.1716 6.14844 14.4209 6.31889 14.7462C6.49077 15.0714 6.5767 15.4606 6.5767 15.9138C6.5767 16.3683 6.49077 16.7589 6.31889 17.0856C6.14844 17.4124 5.90341 17.6631 5.58381 17.8378C5.26562 18.0125 4.88494 18.0999 4.44176 18.0999ZM3.81747 17.3094H4.40341C4.67614 17.3094 4.90554 17.2611 5.09162 17.1645C5.27912 17.0665 5.41974 16.9152 5.51349 16.7106C5.60866 16.5047 5.65625 16.2391 5.65625 15.9138C5.65625 15.5913 5.60866 15.3278 5.51349 15.1233C5.41974 14.9187 5.27983 14.7682 5.09375 14.6716C4.90767 14.575 4.67827 14.5267 4.40554 14.5267H3.81747V17.3094ZM11.2701 15.918C11.2701 16.3939 11.1799 16.7987 10.9995 17.1325C10.8205 17.4663 10.5762 17.7213 10.2665 17.8974C9.95827 18.0722 9.61168 18.1595 9.22674 18.1595C8.83896 18.1595 8.49094 18.0714 8.18271 17.8953C7.87447 17.7192 7.63086 17.4642 7.45188 17.1304C7.2729 16.7966 7.18342 16.3925 7.18342 15.918C7.18342 15.4422 7.2729 15.0374 7.45188 14.7035C7.63086 14.3697 7.87447 14.1155 8.18271 13.9408C8.49094 13.7646 8.83896 13.6766 9.22674 13.6766C9.61168 13.6766 9.95827 13.7646 10.2665 13.9408C10.5762 14.1155 10.8205 14.3697 10.9995 14.7035C11.1799 15.0374 11.2701 15.4422 11.2701 15.918ZM10.3347 15.918C10.3347 15.6098 10.2885 15.3499 10.1962 15.1382C10.1053 14.9266 9.97674 14.766 9.81055 14.6567C9.64435 14.5473 9.44975 14.4926 9.22674 14.4926C9.00373 14.4926 8.80913 14.5473 8.64293 14.6567C8.47674 14.766 8.34748 14.9266 8.25515 15.1382C8.16424 15.3499 8.11879 15.6098 8.11879 15.918C8.11879 16.2263 8.16424 16.4862 8.25515 16.6979C8.34748 16.9095 8.47674 17.07 8.64293 17.1794C8.80913 17.2888 9.00373 17.3435 9.22674 17.3435C9.44975 17.3435 9.64435 17.2888 9.81055 17.1794C9.97674 17.07 10.1053 16.9095 10.1962 16.6979C10.2885 16.4862 10.3347 16.2263 10.3347 15.918ZM15.8036 15.2639H14.8704C14.8533 15.1432 14.8185 15.0359 14.766 14.9422C14.7134 14.847 14.646 14.766 14.5636 14.6993C14.4812 14.6325 14.386 14.5814 14.2781 14.5459C14.1715 14.5104 14.0558 14.4926 13.9308 14.4926C13.7049 14.4926 13.5082 14.5487 13.3406 14.6609C13.1729 14.7717 13.043 14.9337 12.9506 15.1467C12.8583 15.3584 12.8121 15.6155 12.8121 15.918C12.8121 16.2291 12.8583 16.4905 12.9506 16.7021C13.0444 16.9138 13.1751 17.0736 13.3427 17.1815C13.5103 17.2895 13.7042 17.3435 13.9244 17.3435C14.0479 17.3435 14.1623 17.3271 14.2674 17.2945C14.3739 17.2618 14.4684 17.2142 14.5508 17.1517C14.6332 17.0878 14.7013 17.0104 14.7553 16.9195C14.8107 16.8285 14.8491 16.7249 14.8704 16.6084L15.8036 16.6126C15.7795 16.8129 15.7191 17.0061 15.6225 17.1922C15.5273 17.3768 15.3988 17.5423 15.2369 17.6886C15.0763 17.8335 14.8846 17.9486 14.6616 18.0338C14.44 18.1176 14.1893 18.1595 13.9094 18.1595C13.5202 18.1595 13.1722 18.0714 12.8654 17.8953C12.56 17.7192 12.3185 17.4642 12.141 17.1304C11.9648 16.7966 11.8768 16.3925 11.8768 15.918C11.8768 15.4422 11.9663 15.0374 12.1452 14.7035C12.3242 14.3697 12.5671 14.1155 12.8739 13.9408C13.1808 13.7646 13.5259 13.6766 13.9094 13.6766C14.1623 13.6766 14.3967 13.7121 14.6126 13.7831C14.8299 13.8541 15.0224 13.9578 15.19 14.0942C15.3576 14.2291 15.494 14.3946 15.5991 14.5906C15.7056 14.7866 15.7738 15.0111 15.8036 15.2639Z"
                          fill="white"
                        />
                      </g>
                    </g>
                  </svg>
                  <!-- ppt -->
                  <svg
                    v-if="showIcon(item.down_url, 'ppt')"
                    class="icon ppt"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g id="File type icon">
                      <g id="Page">
                        <path
                          id="Page background"
                          d="M20.9992 23.5502H6.59922C5.52226 23.5502 4.64922 22.6772 4.64922 21.6002V2.40024C4.64922 1.32329 5.52226 0.450244 6.59922 0.450244H16.1992C16.272 0.450244 16.3417 0.47914 16.3932 0.530574L22.8689 7.00631C22.9203 7.05774 22.9492 7.1275 22.9492 7.20024V21.6002C22.9492 22.6772 22.0762 23.5502 20.9992 23.5502Z"
                          fill="white"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                        <path
                          id="Earmark"
                          d="M16.1992 0.300293V4.80029C16.1992 6.12577 17.2737 7.20029 18.5992 7.20029H23.0992"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                      </g>
                      <g id="File type wrap">
                        <rect
                          x="0.599609"
                          y="10.9001"
                          width="15.6"
                          height="9.4"
                          rx="1.2"
                          fill="#E62E05"
                        />
                        <path
                          id="File type"
                          d="M2.89098 18.1001V13.7365H4.61257C4.94354 13.7365 5.2255 13.7997 5.45845 13.9261C5.69141 14.0511 5.86896 14.2251 5.99112 14.4481C6.1147 14.6697 6.17649 14.9254 6.17649 15.2152C6.17649 15.5049 6.11399 15.7606 5.98899 15.9822C5.86399 16.2038 5.68288 16.3764 5.44567 16.5C5.20987 16.6235 4.92436 16.6853 4.58913 16.6853H3.49183V15.946H4.43999C4.61754 15.946 4.76385 15.9154 4.87891 15.8544C4.99538 15.7919 5.08203 15.7059 5.13885 15.5965C5.19709 15.4858 5.22621 15.3586 5.22621 15.2152C5.22621 15.0703 5.19709 14.9438 5.13885 14.8359C5.08203 14.7265 4.99538 14.642 4.87891 14.5823C4.76243 14.5213 4.6147 14.4907 4.43572 14.4907H3.81357V18.1001H2.89098ZM6.77575 18.1001V13.7365H8.49734C8.8283 13.7365 9.11026 13.7997 9.34322 13.9261C9.57617 14.0511 9.75373 14.2251 9.87589 14.4481C9.99947 14.6697 10.0613 14.9254 10.0613 15.2152C10.0613 15.5049 9.99876 15.7606 9.87376 15.9822C9.74876 16.2038 9.56765 16.3764 9.33043 16.5C9.09464 16.6235 8.80913 16.6853 8.4739 16.6853H7.3766V15.946H8.32475C8.50231 15.946 8.64862 15.9154 8.76367 15.8544C8.88015 15.7919 8.9668 15.7059 9.02362 15.5965C9.08185 15.4858 9.11097 15.3586 9.11097 15.2152C9.11097 15.0703 9.08185 14.9438 9.02362 14.8359C8.9668 14.7265 8.88015 14.642 8.76367 14.5823C8.64719 14.5213 8.49947 14.4907 8.32049 14.4907H7.69833V18.1001H6.77575ZM10.4943 14.4971V13.7365H14.0781V14.4971H12.7422V18.1001H11.8303V14.4971H10.4943Z"
                          fill="white"
                        />
                      </g>
                    </g>
                  </svg>
                  <!-- xls -->
                  <svg
                    v-if="showIcon(item.down_url, 'xls')"
                    class="icon xls"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g id="File type icon">
                      <g id="Page">
                        <path
                          id="Page background"
                          d="M20.9992 23.5502H6.59922C5.52226 23.5502 4.64922 22.6772 4.64922 21.6002V2.40024C4.64922 1.32329 5.52226 0.450244 6.59922 0.450244H16.1992C16.272 0.450244 16.3417 0.47914 16.3932 0.530574L22.8689 7.00631C22.9203 7.05774 22.9492 7.1275 22.9492 7.20024V21.6002C22.9492 22.6772 22.0762 23.5502 20.9992 23.5502Z"
                          fill="white"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                        <path
                          id="Earmark"
                          d="M16.1992 0.300293V4.80029C16.1992 6.12577 17.2737 7.20029 18.5992 7.20029H23.0992"
                          stroke="#D0D5DD"
                          stroke-width="0.9"
                        />
                      </g>
                      <g id="File type wrap">
                        <rect
                          x="0.599609"
                          y="10.9001"
                          width="15.6"
                          height="9.4"
                          rx="1.2"
                          fill="#099250"
                        />
                        <path
                          id="File type"
                          d="M3.83221 13.7365L4.71218 15.2237H4.74627L5.6305 13.7365H6.67241L5.34073 15.9183L6.70224 18.1001H5.64116L4.74627 16.6108H4.71218L3.81729 18.1001H2.76048L4.12624 15.9183L2.78604 13.7365H3.83221ZM7.25621 18.1001V13.7365H8.1788V17.3394H10.0495V18.1001H7.25621ZM13.0277 14.9914C13.0107 14.8196 12.9375 14.686 12.8082 14.5909C12.679 14.4957 12.5036 14.4481 12.282 14.4481C12.1314 14.4481 12.0043 14.4694 11.9006 14.512C11.7969 14.5532 11.7173 14.6108 11.6619 14.6846C11.608 14.7585 11.581 14.8423 11.581 14.936C11.5781 15.0142 11.5945 15.0823 11.63 15.1406C11.6669 15.1988 11.7173 15.2492 11.7812 15.2919C11.8452 15.3331 11.919 15.3693 12.0028 15.4005C12.0866 15.4304 12.1761 15.4559 12.2713 15.4772L12.6634 15.571C12.8537 15.6136 13.0284 15.6704 13.1875 15.7414C13.3466 15.8125 13.4844 15.8998 13.6009 16.0035C13.7173 16.1072 13.8075 16.2294 13.8714 16.37C13.9368 16.5106 13.9702 16.6718 13.9716 16.8536C13.9702 17.1207 13.902 17.3522 13.767 17.5483C13.6335 17.7429 13.4403 17.8941 13.1875 18.0021C12.9361 18.1086 12.6328 18.1619 12.2777 18.1619C11.9254 18.1619 11.6186 18.1079 11.3572 18C11.0973 17.892 10.8942 17.7322 10.7479 17.5206C10.603 17.3075 10.527 17.044 10.5199 16.7301H11.4126C11.4226 16.8764 11.4645 16.9985 11.5384 17.0965C11.6136 17.1931 11.7138 17.2663 11.8388 17.316C11.9652 17.3643 12.108 17.3884 12.267 17.3884C12.4233 17.3884 12.5589 17.3657 12.674 17.3203C12.7905 17.2748 12.8807 17.2116 12.9446 17.1306C13.0085 17.0497 13.0405 16.9566 13.0405 16.8515C13.0405 16.7535 13.0114 16.6711 12.9531 16.6044C12.8963 16.5376 12.8125 16.4808 12.7017 16.4339C12.5923 16.387 12.4581 16.3444 12.299 16.3061L11.8239 16.1867C11.456 16.0973 11.1655 15.9573 10.9524 15.767C10.7393 15.5767 10.6335 15.3203 10.6349 14.9978C10.6335 14.7336 10.7038 14.5028 10.8459 14.3054C10.9893 14.1079 11.1861 13.9538 11.4361 13.843C11.6861 13.7322 11.9702 13.6768 12.2884 13.6768C12.6122 13.6768 12.8949 13.7322 13.1364 13.843C13.3793 13.9538 13.5682 14.1079 13.7031 14.3054C13.8381 14.5028 13.9077 14.7315 13.9119 14.9914H13.0277Z"
                          fill="white"
                        />
                      </g>
                    </g>
                  </svg>
                  <div class="text_title">
                    {{ item.title }}
                  </div>
                </div>
                <div class="btn-download" @click="downloadFile(item.down_url)">
                  {{ $t("btnText.download") }}
                </div>
              </div>
            </template>
            <div
              v-else-if="fileList && fileList.length == 0"
              class="no-download"
            >
              <a-alert
                :message="$t('content.download.tip')"
                type="warning"
                show-icon
              />
            </div>
            <template v-else>
              <div class="pc-skeleton">
                <div class="menu-list">
                  <div class="menu-item" v-for="i in 8" :key="i">
                    <div class="left">
                      <Skeleton height="40px" width="40px"></Skeleton>
                      <Skeleton block height="40px"></Skeleton>
                    </div>
                    <div class="right">
                      <Skeleton
                        width="69px"
                        height="40px"
                        radius="13px"
                      ></Skeleton>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mobile-skeleton">
                <div class="menu-list">
                  <div class="menu-item" v-for="i in 4" :key="i">
                    <div class="left">
                      <Skeleton height="123px" width="123px"></Skeleton>
                      <Skeleton block height="123px"></Skeleton>
                    </div>
                    <div class="right">
                      <Skeleton
                        width="266px"
                        height="164px"
                        radius="51px"
                      ></Skeleton>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "vue";
import { postDownloadList, postDownloadFileList } from "../../../api/api";
import { message } from "ant-design-vue";
import { useCacheStore } from "../../../store";

const cacheStore = useCacheStore();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

// 状态
const selectedId = ref();
const defaultSelectedKeys = ref(["0"]);
const ClassicList = ref();
const fileList = ref();

// 处理菜单选择
const handleSelect = (item: { id: string; title: string }, index: number) => {
  fileList.value = null;
  selectedId.value = item.id;
  getFileList();
};

function downloadFile(urls: String) {
  const _url = urls.split(",")[0];
  if (_url.length === 0) return message.error($t("message.download.no_url"));
  const link = document.createElement("a");
  link.href = _url.replace("jbs.jiuhuizhan.com", "api.sc-aerospace.com");
  link.style.display = "none";
  link.target = "_blank";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

const getFileList = async function () {
  const result = await postDownloadFileList({ id: selectedId.value });
  if (result.code == 200) {
    fileList.value = result.data.data;
  }
};

const getClassicList = async function () {
  const result = await postDownloadList();
  if (result.code == 200) {
    ClassicList.value = result.data.data.map((item) => ({
      id: item.id + '',
      title: item.title,
    }));
    selectedId.value = ClassicList.value[0].id;
    getFileList()
  }
};

const showIcon = computed(() => {
  return (url: string, type: string) => {
    let arr = url.split(".");
    let ext = arr[arr.length - 1].toLowerCase();
    return ext.includes(type);
  };
});

getClassicList();
</script>

<style scoped lang="less">
.content {
  width: 100%;
  display: flex;
  gap: 20px;
  .menu-content {
    flex: 1;
    .file {
      font-size: 16px;
      display: flex;
      gap: 10px;
      align-items: center;
      svg.icon {
        width: 32px;
        height: 32px;
      }
      .text_title {
        max-width: 1200px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
  .menu-title {
    font-weight: bold;
    font-size: 23px;
  }
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccd6de;
    padding: 10px 0;
  }
  .btn-download {
    background: #ffffff;
    border-radius: 13px 13px 13px 13px;
    border: 1px solid #3d88f2;
    color: #3d88f2;
    font-size: 16px;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.no-download {
  padding-top: 20px;
}

.slider-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  .slider-menu-item {
    font-size: 16px;
    padding: 11px 21px;
    width: 340px;
    cursor: pointer;
    &.active {
      background: #f5f8fa;
      border-radius: 8px 8px 8px 8px;
      color: #3d88f2;
    }
  }
}

// skeleton
.pc-skeleton {
  .slider-menu {
    .slider-menu-item {
      height: 56px;
      padding: 0;
    }
  }
  .menu-list {
    .menu-item {
      gap: 50px;
      .left {
        flex: 1;
        display: flex;
        gap: 10px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .slider-menu {
    gap: 61px;
    flex-direction: row;
    .slider-menu-item {
      font-size: 82px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      padding: 41px 82px;
      white-space: nowrap;
      &.active {
        border-radius: 31px;
      }
    }
  }
  .content {
    flex-direction: column;
    gap: 123px;
    .menu-content {
      .file {
        font-size: 82px;
        gap: 61px;
        svg.icon {
          width: 123px;
          height: 123px;
        }
      }
      .menu-title {
        font-size: 92px;
      }
      .menu-item {
        padding: 82px 0;
      }
      .btn-download {
        border-radius: 51px;
        font-size: 72px;
        padding: 31px 61px;
      }
      .no-download {
        padding-top: 62px;
        :deep(.ant-alert) {
          padding: 31px 61px;
          font-size: 72px;
          border-radius: 31px;
          .anticon {
            margin-right: 42px;
          }
        }
      }
    }
  }

  // skeleton

  .mobile-skeleton {
    .slider-menu {
      display: flex;
      overflow: hidden;
      gap: 61px;
      .slider-menu-item {
        padding: 0;
      }
    }
    .menu-list {
      .menu-item {
        display: flex;
        gap: 61px;
      }
      .left {
        display: flex;
        gap: 61px;
        flex: 1;
      }
    }
  }
}
</style>
